<template>
    <div style="position: relative">
        <div>
            <el-form
                ref="ruleFormRef"
                :model="ruleForm"
                :rules="rules"
                label-width="120"
                class="demo-ruleForm"
                status-icon
                :inline="true"
            >
                <el-form-item
                    label="父节点id："
                    prop="parentId"
                >
                    <el-input
                        v-model="ruleForm.parentId"
                        placeholder="请输入"
                        style="width: 240px"
                    />
                </el-form-item>
                <el-form-item
                    label="父节点名称："
                    prop="parentName"
                >
                    <el-input
                        v-model="ruleForm.parentName"
                        placeholder="请输入"
                        style="width: 240px"
                    />
                </el-form-item>

                <el-form-item
                    label="菜单名称："
                    prop="name"
                    required
                >
                    <el-input
                        v-model="ruleForm.name"
                        placeholder="请输入"
                        style="width: 240px"
                    />
                </el-form-item>
                <el-form-item
                    label="菜单类型："
                    prop="category"
                    required
                >
                    <el-radio-group
                        v-model="ruleForm.category"
                        style="width: 240px"
                    >
                        <el-radio
                            value="1"
                            size="default"
                        >菜单</el-radio>
                        <el-radio
                            value="2"
                            size="default"
                        >按钮</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item
                    label="路由名称："
                    prop="routeName"
                    style="width: 100%"
                >
                    <el-input v-model="ruleForm.routeName" />
                </el-form-item>
                <el-form-item
                    label="路由地址："
                    prop="path"
                    style="width: 100%"
                >
                    <el-input v-model="ruleForm.path" />
                </el-form-item>
                <el-form-item
                    label="组件地址："
                    prop="modulePath"
                    style="width: 100%"
                >
                    <el-input v-model="ruleForm.modulePath" />
                </el-form-item>
                <el-form-item
                    label="菜单图标："
                    prop="icon"
                >
                    <el-popover
                        placement="bottom"
                        :width="400"
                        trigger="click"
                    >
                        <template #reference>
                            <el-input
                                v-model="ruleForm.icon"
                                style="width: 240px"
                                ref="ruleFormIcon"
                            />
                        </template>
                        <div class="iconlist">
                            <div class="iconItem">
                                <el-icon
                                    class="elIcon"
                                    @click="getIcon('Platform')"
                                    :size="20"
                                    :color="
                                        ruleForm.icon == 'Platform'
                                            ? '#409ffc'
                                            : ''
                                    "
                                >
                                    <Platform />
                                </el-icon>
                            </div>
                            <div class="iconItem">
                                <el-icon
                                    class="elIcon"
                                    @click="getIcon('Guide')"
                                    :size="20"
                                    :color="
                                        ruleForm.icon == 'Guide'
                                            ? '#409ffc'
                                            : ''
                                    "
                                >
                                    <Guide />
                                </el-icon>
                            </div>
                            <div class="iconItem">
                                <el-icon
                                    class="elIcon"
                                    @click="getIcon('MagicStick')"
                                    :size="20"
                                    :color="
                                        ruleForm.icon == 'MagicStick'
                                            ? '#409ffc'
                                            : ''
                                    "
                                >
                                    <MagicStick />
                                </el-icon>
                            </div>
                            <div class="iconItem">
                                <el-icon
                                    class="elIcon"
                                    @click="getIcon('EditPen')"
                                    :size="20"
                                    :color="
                                        ruleForm.icon == 'EditPen'
                                            ? '#409ffc'
                                            : ''
                                    "
                                >
                                    <EditPen />
                                </el-icon>
                            </div>
                            <div class="iconItem">
                                <el-icon
                                    class="elIcon"
                                    @click="getIcon('Tools')"
                                    :size="20"
                                    :color="
                                        ruleForm.icon == 'Tools'
                                            ? '#409ffc'
                                            : ''
                                    "
                                >
                                    <Tools />
                                </el-icon>
                            </div>
                            <div class="iconItem">
                                <el-icon
                                    class="elIcon"
                                    @click="getIcon('Operation')"
                                    :size="20"
                                    :color="
                                        ruleForm.icon == 'Operation'
                                            ? '#409ffc'
                                            : ''
                                    "
                                >
                                    <Operation />
                                </el-icon>
                            </div>
                            <div class="iconItem">
                                <el-icon
                                    class="elIcon"
                                    @click="getIcon('Menu')"
                                    :size="20"
                                    :color="
                                        ruleForm.icon == 'Menu' ? '#409ffc' : ''
                                    "
                                >
                                    <Menu />
                                </el-icon>
                            </div>
                            <div class="iconItem">
                                <el-icon
                                    class="elIcon"
                                    @click="getIcon('User')"
                                    :size="20"
                                    :color="
                                        ruleForm.icon == 'User' ? '#409ffc' : ''
                                    "
                                >
                                    <User />
                                </el-icon>
                            </div>
                        </div>
                    </el-popover>
                </el-form-item>
                <el-form-item
                    label="显示顺序："
                    prop="sort"
                >
                    <el-input-number
                        v-model="ruleForm.sort"
                        :min="0"
                        style="width: 240px"
                    />
                </el-form-item>

                <el-form-item
                    label="菜单状态："
                    prop="status"
                    required
                >
                    <el-switch
                        v-model="ruleForm.status"
                        active-text="启用"
                        inactive-text="停用"
                        :active-value="1"
                        :inactive-value="0"
                    />
                </el-form-item>
            </el-form>
            <div style="text-align: center; margin-top: 50px">
                <el-button
                    type="primary"
                    style="background-color: #58BE3F;"
                    @click="updateDep"
                >确认</el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import menuHttp from "@/https/menu.js";
import {
    EditPen,
    Guide,
    MagicStick,
    Menu,
    Operation,
    Platform,
    Tools,
    User
} from "@element-plus/icons-vue";
import { nextTick, reactive, ref, watch } from "vue";
const emits = defineEmits(["updateDep"]);
const props = defineProps({
    ruleFormProps: {
        type: Object,
        default: {},
    },
    type: {
        type: String,
        default: "",
    },
});
const ruleForm = reactive({
    id: "",
    parentId: "",
    parentName: "",
    name: "",
    category: "",
    routeName: "",
    path: "",
    modulePath: "",
    icon: "",
    sort: 0,
    status: 1,
});
ruleForm.value = props.ruleFormProps.value;
watch(
    () => props.ruleFormProps,
    (val) => {
        console.log(val, "val");
        ruleForm.id = val.id;
        ruleForm.parentId = val.parentId;
        ruleForm.parentName = val.parentName;
        ruleForm.name = val.name;
        ruleForm.category = val.category + "";
        ruleForm.routeName = val.routeName;
        ruleForm.path = val.path;
        ruleForm.modulePath = val.modulePath;
        ruleForm.icon = val.icon;
        ruleForm.sort = val.sort;
        ruleForm.status = val.status;
        console.log(ruleForm, "valvalval");
    },
    { deep: true }
);
const rules = reactive({
    name: [
        {
            required: true,
            message: "请输入",
            trigger: "blur",
        },
    ],
    category: [
        {
            required: true,
            message: "请选择",
            trigger: "blur",
        },
    ],
    path: [
        {
            required: true,
            message: "请输入",
            trigger: "blur",
        },
    ],
    routeName: [
        {
            required: true,
            message: "请输入",
            trigger: "blur",
        },
    ],
    sort: [
        {
            required: true,
            message: "请输入",
            trigger: "blur",
        },
    ],
    status: [
        {
            required: true,
            message: "请选择",
            trigger: "blur",
        },
    ],
});
const ruleFormRef = ref();
const updateDep = async () => {
    console.log(props.type);
    if (!ruleFormRef.value) return;
    await ruleFormRef.value.validate(async (valid, fields) => {
        if (valid) {
            if (props.type == "add" || props.type == "addNode") {
                const res = await menuHttp.menuAddMenu(ruleForm);
                if (res.data.code === 200) {
                    emits("updateDep");
                }
            } else {
                const res = await menuHttp.menuEditMenu(ruleForm);
                if (res.data.code === 200) {
                    emits("updateDep");
                }
            }
        }
    });
};
const ruleFormIcon = ref();
const getIcon = (icon) => {
    nextTick(() => {
        ruleForm.icon = icon;
        ruleFormIcon.value.focus();
    });
};
</script>

<style lang="less" scoped>
.filter {
    flex-wrap: wrap;
    display: flex;
    flex-direction: row;
    align-items: center;
    .filter-item {
        margin: 0 15px 15px 0px;
        display: flex;
        flex-direction: row;
        align-items: center;
        label {
            font-size: 14px;
            color: #333;
            display: inline-block;
            white-space: nowrap;
        }
    }
}
.emptyBox {
    width: 100px;
    height: 300px;
}
.emptyNodata {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.iconlist {
    display: flex;
    flex-direction: row;
    .iconItem {
        margin: 4px;
        cursor: pointer;
    }
}
</style>